<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--  1.按钮和DIV的单击事件（三种绑定方式） -->
		<button type="button" id="btn1" onclick="aa();">普通按钮1</button>
		<button type="button" id="btn2" >普通按钮2</button>
		<div id="div1" style="width: 100px;height: 100px;border: 1px solid blue;">
			div1内容
		</div>
		<!-- 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式） -->
		<div id="div2" style="width: 300px;height: 300px;border: 1px solid rgb(30, 221, 13);"
		onmouseenter="bb2();" onmouseleave="bb3();"onmousemove="bb4()">
			div2内容
		</div>

		<!-- 3.登入页面用户名输入框，密码输入框，提交按钮 -->
		<form action="" method="post">
			账号：<input type="text" id="name" value="" onfocus="cc1();" onblur="cc2();"/><br>
			密码：<input type="password" name="" id="pwd1" value="" onfocus="mm1();" onblur="mm2();"/><br>
			<button type="submit" onclick='dd()'>提交</button>
			<!-- 4.实现DIV 鼠标移动事件，采用监听器方式 -->
			<div id="div3" style="height: 100px;width: 100px;border: 1px solid rgb(43, 255, 0);"></div>
			<button type="button" onclick="add()">添加监听器</button>
			   <button type="button" onclick="remove()">移除监听器</button>
		</form>
	</body>


	<script type="text/javascript">
		// 1
		function aa(){
			console.log('按钮被点击了')
		}

		function bb(){
			console.log('按钮2被点击了')
		}
		document.getElementById('btn2').onclick = bb;
		document.getElementById('div1').onclick = function(){
			console.log('div1被点击了')
		}
		

		// 2
		function bb2(){
			console.log('进入div2')
		}
		function bb3(){
			console.log('离开div2')
		}
		
		function bb4(){
			console.log('在div2上移动')
		}

		
// 任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		function cc1(){
			console.log('用户在输入名称');
			
		}
//          3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		function cc2(){
			if (name=='') {
				alert('没有输入用户名');
			}
		}
//          3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		function mm1(){
			console.log('用户在输入密码');
		}
//          3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		function mm2(){
			if (pwd1.value=='') {
				alert('没有输入密码');
			}
		}
//          3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
//               密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function dd(){
			var name1 = document.getElementById('name')
            var pwd2=document.getElementById('pwd1')
			if (name1.value==''&& pwd2.value=='') {
				alert('用户名和密码为空');
				return;
			}if (name1.value=='') {
				alert('用户名为空');
			}if (pwd2.value=='') {
				alert('密码为空');
			}
		}
		
		// 4.实现DIV 鼠标移动事件，采用监听器方式
		function temp1(){
			console.log('鼠标正在移动')
		}
		function add(){
			document.getElementById('div3').addEventListener('mousemove',temp1)
			alert('监听器添加成功')
		}
		function remove(){
			document.getElementById('div3').removeEventListener('mousemove',temp1)
			alert('监听器移除成功')
		}
	</script>
</html>
